<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <button>获取验证码1</button>
    <script>
        function fn(a, b) {
            console.log(this);
            console.log(a + b);
        }
        var o = {
            name: "andy",
        };
        // 1.不会自动调用函数
        // 2.会产生新函数
        //想要调用需要定一个变量
        var f = fn.bind(o, 1, 2);
        f();

        // 3. 如果我们不需要调用  但又想改变这个函数的this指向
        var btn = document.querySelector("button");

        // 1.当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中
        // this 的值和外层的 this 是一样的。
        // 2.箭头函数中的this引用的就是最近作用域中的this
        // 3.向外层作用域中，一层一层查找this，直到有this的定义
        // 4.有的箭头函数都没有自己的 this。 不适合定义一个 对象的方法。
        //箭头函数的this与他平级的向外一层

        btn.onclick = function () {
            this.disabled = true;
            setTimeout(
                function () {
                    //this.disabled = false; //this 指向的是window
                    this.disabled = false; //this 指向的是btn
                    console.log(this);
                }.bind(this),
                2000
            ); //这个this 指向btn
        };

        //箭头函数的this与他平级的向外一层

        var test = 11;
        var objj = {
            test: 22,
            that: this,
            sayhi: function () {
                var odd = 3;
                console.log(this, "sayhi");
                return odd + this.test;
            },
            hi: () => {
                var odd = 3;
                console.log(this, "hi");
                return odd + this.test;
            },
        };
        console.log(objj.sayhi(), "2");
        console.log(objj.hi(), "33");
        console.log(objj.that, "objj的this");
    </script>
</body>

</html>